import { CheckCard } from '@ant-design/pro-card';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Exgratia from './OfferSheet/Exgratia.png';
import kyExpressOne from './OfferSheet/kyExpressOne.png';
import kyExpressTwo from './OfferSheet/expresstwo.png';
import jingdongone from './OfferSheet/jingdongone.png';
import jingdongtwo from './OfferSheet/jingdongytwo.png';
import jingdongthree from './OfferSheet/jingdongthree.png';
import styles from './index.less';
import { useState } from 'react';
export default () => {
  const [imageShow, setImageShow] = useState<[boolean, boolean, boolean]>([true, false, false]);
  return (
    <PageHeaderWrapper>
      <div className={styles.tableHome}>
        <div className={styles.box}>
          <CheckCard.Group
            onChange={(value) => {
              if (value == 'A') {
                setImageShow([true, false, false]);
              } else if (value == 'B') {
                setImageShow([false, true, false]);
              } else if (value == 'C') {
                setImageShow([false, false, true]);
              }
            }}
            defaultValue="A"
          >
            <CheckCard title="京东特惠送价格表" description="始发地：杭州" value="A" />
            <CheckCard title="跨越速运价格表" description="始发地：杭州" value="B" />
            <CheckCard title="京东特快重货价格表" description="始发地：杭州" value="C" />
          </CheckCard.Group>
        </div>
        <div className={styles.box}>
          {imageShow[0] && (
            <div>
              <img src={Exgratia} alt="" />
            </div>
          )}
          {imageShow[1] && (
            <div>
              <div>
                <img src={kyExpressOne} alt="" />
              </div>
              <div style={{ marginLeft: 3 }}>
                {' '}
                <img src={kyExpressTwo} alt="" />
              </div>
            </div>
          )}
          {imageShow[2] && (
            <div>
              <div>
                {' '}
                <img src={jingdongone} alt="" />
              </div>
              <div>
                {' '}
                <img src={jingdongtwo} alt="" />
              </div>
              <div>
                {' '}
                <img src={jingdongthree} alt="" />
              </div>
            </div>
          )}
        </div>
      </div>
    </PageHeaderWrapper>
  );
};
